<template>
  <div class="option-site-footer">
    <span>共{{count}}条/共{{total}}页/第{{index}}页</span>

    <div class="point">
      <div class="pre" v-if="index > 1" @click="preClick">上一页</div>

      <div v-for="j in total">
        <span v-if="j <= 5">{{j}}</span>
        <span v-else-if="j === 6">...</span>
        <span v-else-if="j === total">{{total}}</span>
      </div>

      <div class="next" v-if="index < total" @click="nextClick">下一页</div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "Footer",
    props: {
      count: {
        type: Number,
        default: 0
      },
      total: { // 总页数
        type: Number,
        default: 0
      },
      index: { // 当前页
        type: Number,
        default: 1
      }

    },
    data() {
      return {
        username: '',
        code: '',
        lessAmount: 0,
        moreAmount: 0,
        lessDate: new Date('2020-11-04 18:41:42'),
        moreDate: new Date(),
      }
    },
    mounted() {
      this.$bus.$on('orderBus', ({un, co, la, ma, ld, md}) => { // 接收事件总线发来的筛选用户条件,如性别,商家与否,查询信息;以确保在筛选后还能够使用上一页、下一页、等功能
        // console.log('footer-mounted:s=' + s + ';----b=' + b + ';------search=' + search + ';---index=' + this.index); // 因为声明周期函数的原因,这个index的值获取有可能不对
        // console.log(un +'--Mounted------' + co + '---' + la + '---' + ma + '---' + ld + '---' + md);
        this.username = un
        this.code = co
        this.lessAmount = la
        this.moreAmount = ma
        this.lessDate = ld
        this.moreDate = md
      })
    },
    methods: {
      preClick() {
        // this.index--; // (不正确的使用,直接对props属性进行修改)要把index进行--操作,再把index作为参数传出,否则index值不变会影响接下来的业务逻辑
        // this.i--; // 要把i进行--操作,再把i作为参数传出,否则i值不变会影响接下来的业务逻辑
        this.$emit('pre', {
          un: this.username,
          co: this.code,
          la: this.lessAmount,
          ma: this.moreAmount,
          ld: this.lessDate,
          md: this.moreDate,
          i: this.index,
        })
      },
      nextClick() {
        // let i = this.index++; // (不正确的使用,直接对props属性进行修改)要把index进行++操作,再把index作为参数传出,否则index值不变会影响接下来的业务逻辑
        // this.i++; // 要把i进行++操作,再把i作为参数传出,否则i值不变会影响接下来的业务逻辑
        this.$emit('next', {
          un: this.username,
          co: this.code,
          la: this.lessAmount,
          ma: this.moreAmount,
          ld: this.lessDate,
          md: this.moreDate,
          i: this.index,
        })
      },

    }
  }
</script>

<style scoped>
  .option-site-footer {
    height: 71px;
    line-height: 71px;

    /*background-color: green;*/
  }

  .point {
    float: right;
    border-radius: 6px;
    transform: translateY(16px);
  }
  .point div {
    padding: 5px;

    height: 30px;
    line-height: 30px;
    float: left;

    text-align: center;
    color: #007bff;

    border: 1px solid #cdcdcd;
    background-color: white;

    /*background-color: red;*/
  }
  .point div:hover {
    background-color: #eeeeee;
    opacity: 0.75;
    cursor: pointer;
  }
  .point div span {
    /*background-color: red;*/
  }
  .point .pre {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  .point .next {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
</style>